<template>
	<view>

		<view class="connect">
			<view :class="isDiscovery ? 'mask' : ''"></view>
			<view class="connect-wrap">
				<image :src="isDiscovery ? '../../static/img/search-bluetooth.gif' : '../../static/img/search-static.png'" :class="isDiscovery ? 'search-gif' : 'search-png'"></image>
				<text :hidden="!isDiscovery">正在搜索蓝牙...</text>
			</view>
			<radio-group @change="radioChange">
				<view class="item-wrap">
					<label class="item" v-for="(item,index) in bluetoothList">
						<view :class="current == index?'black':''">
							<image src="../../static/img/bluetooth-icon.png"></image>
							<text>{{ item.name != '' ?  item.name : item.deviceId}}</text>
						</view>
						<radio color="#1F95EC" :value="item.deviceId" style="transform:scale(0.8)" />
					</label>
				</view>
			</radio-group>
			
			<view class="btn-wrap mt100" v-if="bluetoothList.length > 0">
				<xc-button name="连接" @click="connectFun"></xc-button>
			</view>
			<view class="tip red mt40">
				<xc-tip :tipArr="tipArr"></xc-tip>
			</view>
		</view>
		<view class="swrap" @click="searchDecices">
			<image src="../../static/img/search-bluetooth-icon.png"></image>
			<text>搜索设备</text>
		</view>
	</view>
</template>

<script>
	import xcButton from "@/components/simple/xcButton.vue"
	import xcTip from "@/components/simple/xcTip.vue"
	import bluetooth from "@/static/utils/bluetooth.js"
	import {
		throttle
	} from "@/static/utils/utils.js"
	let globalData = getApp().globalData;
	export default {
		data() {
			return {
				current: -1,
				// bluetoothList: [{
				// 	"deviceId": "1",
				// 	name: "1"
				// }, {
				// 	"deviceId": "2",
				// 	name: "2"
				// }],
				bluetoothList: [],
				isDiscovery: true,
				tipArr: ['1、检查手机蓝牙是否开启',  '2、检查手机是否打开定位服务','3、点击底部搜索设备']
			}
		},
		onLoad() {
			uni.$on('getDevices', (devices) => {
				this.bluetoothList = devices
			})

			uni.$on('getDiscoveryStatus', (status) => {
				this.isDiscovery = status
			})

			//进入首页连接蓝牙
			bluetooth.bluetoothConnect();
		},
		onShow() {
			this.bluetoothList = globalData.bluetoothList;
		},
		components: {
			xcButton,
			xcTip
		},
		methods: {
			radioChange(e) {
				for (let i = 0; i < this.bluetoothList.length; i++) {
					if (this.bluetoothList[i].deviceId === e.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			//搜索设备
			searchDecices: throttle(async function() {
				this.isDiscovery = true;
				await bluetooth.getBluetoothAdapterState();
				bluetooth.bluetoothDevicesDiscovery();
			}),
			connectFun: throttle(async function() {
				await bluetooth.getBluetoothAdapterState();
				let that = this;
				if (this.current == -1) {
					return;
					this.$showModal("请选择蓝牙设备");
				}
				let deviceId = this.bluetoothList[this.current].deviceId;
				let name = this.bluetoothList[this.current].name;
				//获取当前蓝牙连接列表，判断当前蓝牙是否连接，如果正常连接，则只重新读取卡数据
				bluetooth.getConnectedBluetoothDevices(function(devices) {
					//如果当前设备已连接，则直接读卡，否则判断当前是否有其他连接设备，如果有，则提示设备只能连接一个，否则，进行连接操作
					let devicesByName = devices.filter((item) => {
						return item.name == name;
					})
					if (devicesByName.length > 0) {
						console.log("直接写卡,跳转到写卡页面");
						//let writePage = getApp().globalData.writePage;
						that.$navigateTo("/pages/bluetooth/dataTest");
					} else {
						if (devices.length > 0) {
							that.$showModal("当前只能连接一个设备");
						} else {
							that.$showLoading("连接中");
							// globalData.readCardType = "connect";
							globalData.deviceId = deviceId;
							bluetooth.createBLEConnection();
						}
					}
				});
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.connect {
		padding: 0upx 32upx 120upx 32upx;

		.mask {
			background-color: rgba(0, 0, 0, 0.09);
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999
		}
	}

	.connect .connect-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 506rpx;
		justify-content: center;
		padding-top: 50rpx;
	}

	.connect .connect-wrap .search-gif {
		width: 502rpx;
		height: 466rpx;
	}

	.connect .connect-wrap .search-png {
		width: 362rpx;
		height: 363rpx;
	}

	.connect .connect-wrap text {
		position: relative;
		top: -60rpx;
	}

	.swrap:active {
		background-color: #ccc !important;
	}

	.swrap {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		z-index: 9;
		color: #1F95EC;
		flex-direction: column;
		border-top: 1rpx solid #e6e6e6;
		background-color: #fff;
	}

	.swrap image {
		width: 38rpx;
		height: 38rpx;
	}

	.connect .item-wrap .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #e6e6e6;
		height: 86rpx;
		width: 100%;
		color: #999999;
	}

	.connect .item-wrap .item view {
		display: flex;
		align-items: center;
	}

	.connect .item-wrap .item view image {
		width: 28rpx;
		height: 38rpx;
		margin-right: 8rpx;
	}
</style>
